<template>
    <!-- 组件的结构 -->
    <!-- 有且只有一个div根元素 -->
  <div>
    <!-- 插值表达式中的变量名称要跟data当中对应 -->
    <!-- 插值表达式写一些简单的变量和表达式，但是不允许出现if和for语法 -->
    <!-- 插值表达式不允许出现在标签属性上面，这种写法已经废弃，以后会学习v-bind去替代-->
    <div>{{num}}</div>
    <!-- 可以写一些基本的表达式 -->
    <div>我是{{obj.uname}}</div>
    <div>我今年{{obj.age / 3}}岁</div>
    <div>我的爱好是{{obj.age > 30 ? obj.hobby2[0] : obj.hobby[0]}}</div>
    <!-- <input type="text" value={{obj.uname}} /> -->
   </div>
</template>
 
<script>
//vue组件的核心配置项
export default {
//   name: "",
//   components: {},
//   props: {},

//data就是我们这个vue组件的数据源
  data() {
    return {
        num:20,
        obj:{
          uname:'ikun',
          age:'72',
          hobby:['打篮球','唱','跳','rap'],
          hobby2:['抽','喝','烫']
        }
    };
  },
//   computed: {},
//   watch: {},
//   created() {},
//   methods: {}
};
</script>


<style scoped>
     
</style>